<template>
  <div class="history">
    <div class="his_header">
      <h3><i class="el-icon-s-flag">历史记录</i></h3>
      <div class="his_sec">
        <el-input
          placeholder="请输入内容"
          v-model="secTitle"
          prefix-icon="el-icon-search"
          clearable
          @change="secHistory"
        ></el-input
        ><el-button icon="el-icon-search" type="primary" @click="secHistory"
          >搜索</el-button
        >
      </div>
      <el-button type="danger" round>清空历史记录</el-button>
    </div>
    <div class="his_main">
      <ul
        class="list"
        v-infinite-scroll="load"
        infinite-scroll-distance="10"
        infinite-scroll-disabled="disabled"
      >
        <li v-for="i in count" class="list-item" :key="i.id">
          <div class="timeLine">
            <span></span>
          </div>
          <div class="time">
            {{ i.time }}
          </div>
          <div class="list_main">
            <h5 @click="lookWorks(i.works_id, i.author_id, i.type)">
              {{ i.title }}
            </h5>
            <p>
              <span class="el-icon-user-solid">{{ i.author }}</span>
              <span
                :class="
                  i.type == 1
                    ? 'el-icon-s-flag'
                    : i.type == 2
                    ? 'el-icon-s-order'
                    : 'el-icon-video-camera-solid'
                "
                >{{
                  i.type == 1 ? "资讯" : i.type == 2 ? "文章" : "视频"
                }}</span
              >
            </p>
          </div>
          <div class="delBtn">
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="delHistory(i.id)"
              circle
            ></el-button>
          </div>
        </li>
        <li v-if="!noMore">加载中...</li>
        <li v-if="noMore">没有更多了</li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      count: [],
      loading: false,
      allData: 0,
      ye: 0,
      secTitle: "",
    };
  },
  created() {
    this.getHistory();
  },
  computed: {
    noMore() {
      return this.count.length >= this.allData;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  methods: {
    getHistory() {
      axios
        .post(`http://localhost:3000/getHistory`, {
          ye: this.ye,
          secTitle: this.secTitle,
        })
        .then((ret) => {
          this.allData = ret.data.allHistory;
          this.count = this.count.concat(ret.data.history);
          this.count = this.unique(this.count);
          this.ye = this.ye + 1;
          this.loading = false;
        });
    },
    unique(arr) {
      const res = new Map();
      return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1));
    },
    delHistory(id) {
      axios.post(`http://localhost:3000/delHistory`, { id: id }).then((ret) => {
        if (ret.data.code == 1) {
          this.$message({
            showClose: true,
            message: "删除成功!!!",
            type: "success",
          });
          this.count.forEach((e, v) => {
            if (e.id == id) {
              this.count.splice(v, 1);
            }
          });
        }
      });
    },
    secHistory() {
      this.ye = 0;
      this.count = [];
      this.getHistory();
    },
    load() {
      this.loading = true;
      this.getHistory();
    },
    lookWorks(id1, id2, type) {
      if (type == 1) {
        this.$router.push({
          path: "/Details/news",
          query: { newsID: id1 },
        });
      } else if (type == 2) {
        this.$router.push({
          path: "/Details/article",
          query: { article: id1, writerID: id2 },
        });
      } else {
        this.$router.push({
          path: "/Details/video",
          query: { video: id1, writerID: id2 },
        });
      }
    },
  },
};
</script>

<style scoped>
.his_header {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
.his_header > h3 {
  font-size: 20px;
  color: #e3936c;
}
.his_sec {
  width: 500px;
  display: flex;
}
.his_main {
  overflow-y: hidden;
  display: flex;
  height: 1000px;
}
.his_main > ul > li {
  height: 100px;
  margin: 0 50px;
  box-sizing: border-box;
}
.his_main > ul.list {
  width: 100%;
  overflow: auto;
  height: 100%;
}
.timeLine {
  width: 2px;
  height: 100%;
  float: left;
  position: relative;
  background-color: #f2f6fc;
}
.timeLine > span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #d3e1f7;
}
.time {
  width: 180px;
  float: left;
  margin: 0 20px;
  color: #909399;
  line-height: 100px;
}
.list_main {
  padding: 10px 50px;
  float: left;
}
.list_main > h5 {
  font-size: 20px;
  color: #303133;
  margin-bottom: 30px;
  cursor: pointer;
}
.list_main p {
  color: #909399;
}
.list_main p > span {
  margin-right: 100px;
}
.delBtn {
  float: right;
}
</style>
